<!-- 副标题组件 -->
<template>
  <div>

    <component class="title-sub" :is="tagName" v-bind="tagAttributes" v-if="tagName">
      <span v-for="(item, index) in til" :key=index class="item">
        {{ item }}
      </span>
    </component>
    <!-- 如果没有传入 tagName，则显示默认内容 -->
    <p v-else>没有指定要创建的标签。</p>

  </div>
</template>

<script setup>
const props = defineProps({
  tagName: {
    type: String,
    default: 'tagName的值',
  },
  til: {
    type: Array,
    default: ["til的值"],
  },
  // 假设你还有一个 prop 来传递标签的属性
  tagAttributes: {
    type: Object,
    default: () => ({
      // title: "title的值"
    }),
  },
})
</script>

<style lang="less" scoped>
@font-color-black: #000;

.title-sub {
  font-size: 0.6rem;
  color: @font-color-black;
}

@media (max-width: 600px) {
  .title-sub {
    font-size: 0.3rem;
  }
}
</style>